/**
 * Created by shantong on 2018/4/29.
 */
import React from 'react';
// import { connect } from 'react-redux'
import { Icon, Card, Row, Col, Collapse, Checkbox, Tooltip, Input } from 'antd';
// import './'
import '../../style/index/index.css';

const Panel = Collapse.Panel;

const customPanelStyle = {
	borderRadius: 4,
	border: 0,
	overflow: 'hidden',
};



class Index extends React.Component {
	constructor(props) {
		super(props);
		this.nextTodoId = 5;
		this.state = {
			todoList: [
				{
					id: 1,
					text: '4444',
					completed: false,
				},
				{
					id: 2,
					text: '5555',
					completed: false,
				},
				{
					id: 3,
					text: '77777',
					completed: true,
				},
				{
					id: 4,
					text: '88888',
					completed: false,
				},
			],
		};
	}
	toggleTodo = (e) => {
		let latestTodo = this.state.todoList.map(
			todo => (todo.id === e.target.value) ? {...todo, completed: !todo.completed} : todo
		);
		this.setState({todoList: latestTodo});
	}
	addTodo = (e) => {
		if (e.target.value === '') {
			return false;
		}
		let latestTodo = [
			{
				id: this.nextTodoId ++,
				text: e.target.value,
				completed: false
			},
			...this.state.todoList
		]
		this.setState({todoList: latestTodo});
		e.target.value = '';
	}
	render() {
		return <div style={{ minHeight: 3000 }}>
			<Row>
				<Col span={4}>
					<div className="message-box">
						<Card bordered={false} hoverable>
							<div className="y-center">
								<div className="fl" style={{marginRight: 10}}>
									<Icon style={{fontSize: '2em', color: '#13c4ef'}} type="edit" />
								</div>
								<div className="fl">
									<span className="text-muted">文章</span>
									<h2>50</h2>
								</div>
							</div>
						</Card>
					</div>
					<div className="message-box">
						<Card bordered={false} hoverable>
							<div className="y-center">
								<div className="fl" style={{marginRight: 10}}>
									<Icon style={{fontSize: '2em', color: '#40a9ff'}} type="eye" />
								</div>
								<div className="fl">
									<span className="text-muted">访问量</span>
									<h2>3355550</h2>
								</div>
							</div>
						</Card>
					</div>
				</Col>
				<Col span={4}>
					<div className="message-box">
						<Card bordered={false} hoverable>
							<div className="y-center">
								<div className="fl" style={{marginRight: 10}}>
									<Icon style={{fontSize: '2em', color: '#faad14'}} type="star" />
								</div>
								<div className="fl">
									<span className="text-muted">收藏</span>
									<h2>1000</h2>
								</div>
							</div>
						</Card>
					</div>
					<div className="message-box">
						<Card bordered={false} hoverable>
							<div className="y-center">
								<div className="fl" style={{marginRight: 10}}>
									<Icon style={{fontSize: '2em', color: '#44ad11'}} type="user" />
								</div>
								<div className="fl">
									<span className="text-muted">会员</span>
									<h2>500</h2>
								</div>
							</div>
						</Card>
					</div>
				</Col>
				<Col span={16}>
					<div className="message-box">
						<div style={{background: '#08263a'}}>
							<img src="http://xstnet.com/charts.png" alt=""/>
						</div>
					</div>
				</Col>
			</Row>
			<Row>
				<Col span={8}>
					<div className="message-box">
						<Collapse bordered={false} defaultActiveKey={['1']}>
							<Panel header="待办事项" key="1" style={customPanelStyle}>
								<p style={{paddingLeft: 24}}>
									<Input onPressEnter={this.addTodo} className='add-todolist-input' placeholder="添加新事项" />
								</p>
								<Card bodyStyle={{padding: '0 24px', maxHeight: 300, overflowY: 'auto'}} bordered={false}>
									{this.state.todoList.map(todo => {
										return <p className='overflow-ellipsis' key={`todo-${todo.id}`}>
											<Checkbox value={todo.id} onChange={this.toggleTodo} className={todo.completed ? 'todo-completed': ''} checked={todo.completed ? true: false}>
												<Tooltip placement="topLeft" title={todo.text}>
													{todo.text}
												</Tooltip>
											</Checkbox>
										</p>
									})}
								</Card>
							</Panel>
						</Collapse>
					</div>
				</Col>
				<Col span={16}>
				</Col>
			</Row>
		</div>;
	}
}

export default Index;